<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #out{
            width: 1190px;
            height:360px;
            margin:0 auto;
            background-color: rgba(128, 128, 128, 0.253);
        }
        #left{
            display: inline-block;
            height:360px;
            width: 900px;
            line-height: 380px;
        }
        #right{
            display: inline-block;
            height:360px;
            width: 280px;
            overflow: auto;
        }
        img{
            width: 900px;
            height:360px;
            line-height: 360px;
        }
        .text{
            height:58px;
            background-color:  #e68c8b;
            line-height: 58px;
            margin-top:12px;
        }
        .text div{
            display: inline-block;
            height:58px;
            width:40px;
            overflow: auto;
        }
        .text p{
            display: inline-block;
            overflow: auto;
        }
        .pb{
            background-color: #fff;
        }
        #pic{
            width: 100%;
            height:100%;
            float: left;
        }
    </style>
</head>
<body>
    <div id="out">
        <div id="left">
            <img id="bigPic" src="./images/q1.jpg">
        </div>
        <div id="right">
            <div class="text" title="1"><div></div><p>奔腾品牌旗舰店 买买买</p></div>
            <div class="text" title="2"><div></div><p>爱乐士品牌旗舰店 买买买</p></div>
            <div class="text" title="3"><div></div><p>路易13品牌旗舰店 买买买</p></div>
            <div class="text" title="4"><div></div><p>宝马品牌旗舰店 买买买</p></div>
            <div class="text" title="5"><div></div><p>CK品牌旗舰店 买买买</p></div>
        </div>
    </div>
</body>
<script>
    var text = document.getElementsByClassName("text");
    var bigPic = document.getElementById("bigPic");
    var i=0;
    for(i=0;i<text.length;i++){
        text[i].onmouseover = function(){
            for(var j = 0; j < text.length; j++) {
                var classStr = text[j].getAttribute("class");
                var classArr = classStr.split(" ");
                if(classArr.indexOf("pg")>=0){
                    var index = classArr.indexOf("pb");
                    classArr.splice(index, 1);
                    var str = classArr.join(" ");
                    text[j].className = str;
                }
                else {
                     continue;
                 }
            }
            this.className = "text pb";
            var img = document.createElement("img");
            img.setAttribute('src',"./images/t10.jpg");
            this.firstElementChild.appendChild(img);
            img.id="pic";
            var title=this.title;
            var imgSrc = "./images/q"+title+".jpg";
            bigPic.setAttribute("src", imgSrc);
        }
        text[i].onmouseout = function(){
            var img=document.getElementById("pic");
            this.className = "text";
            this.firstElementChild.removeChild(img);
        }
    }
</script>
</html>